import React, { useEffect, useState } from 'react';

import { useDispatch, useSelector, history } from 'umi';

import styles from './index.less';

import { ILists, Tprops } from '../utils/interface';

const Detail: React.FC<Tprops> = (props) => {
  const dispatch = useDispatch();
  const { detailList } = useSelector((state: any) => state.home);
  const [year, setyear] = useState([]);
  // const [list, setList] = useState<string []>([]);
  useEffect(() => {
    // console.log(props);
    let id = props.match.params.id;
    console.log(id);

    dispatch({
      type: 'home/getDetail',
      payload: { SerialID: id },
    });
    if (detailList.list) {
      let year =
        detailList.list &&
        detailList.list.map((i: ILists) => i.market_attribute.year as string);
      console.log(year);
      year = [...new Set(year)];
      setyear(year);
    }
  }, []);
  const onclickimg = () => {
    history.push('/img');
  };
  // 点击询问底价
  function inquiry(img: any, name: any, i: any) {
    console.log(i);
    history.push({
      pathname: '/inquiry',
      query: {
        img: img,
        name: name,
        i,
      },
    });
  }
  return (
    <div className={styles.detail}>
      {console.log(detailList)}
      <div className={styles.img}>
        <img src={detailList && detailList.CoverPhoto} alt="" />
        <button
          className={styles.img_btn}
          onClick={() => {
            onclickimg();
          }}
        >
          {detailList && detailList.pic_group_count}张照片
        </button>
      </div>

      <div className={styles.info}>
        <div>
          <b>
            {detailList.market_attribute &&
              detailList.market_attribute.dealer_price}
          </b>
          <p>
            指导价：
            {detailList.market_attribute &&
              detailList.market_attribute.official_refer_price}
          </p>
        </div>
        <button>{detailList && detailList.BottomEntranceTitle}</button>
      </div>
      <div className={styles.c_type}>
        <span>全部</span>
        {year.length &&
          year.map((i: any, index: number) => {
            return <span key={index}>{i}</span>;
          })}
      </div>
      <div>
        {detailList.list &&
          detailList.list.map((i: any, index: number) => {
            return (
              <div key={index} className={styles.dej}>
                <p>
                  <span>
                    {i.exhaust_str}/{i.max_power_str}
                  </span>
                  <span>{i.inhale_type}</span>
                </p>
                <div>
                  <span>{i.market_attribute.year}款</span>
                  <span>{i.car_name}</span>
                  <p>
                    {i.horse_power}马力{i.gear_num}
                    {i.trans_type}
                  </p>
                  <div>
                    指导价：{i.market_attribute.official_refer_price}
                    <b>{i.market_attribute.dealer_price_min}</b>
                  </div>
                </div>
                <button
                  onClick={() => {
                    inquiry(detailList.Picture, detailList.AliasName, i);
                  }}
                >
                  {detailList.BottomEntranceTitle}
                </button>
              </div>
            );
          })}
      </div>
      <div className={styles.k}></div>
      <div className={styles.footers}>
        <p>{detailList.BottomEntranceTitle}</p>
        <div>本地经销商为你报价</div>
      </div>
    </div>
  );
};

export default Detail;
